import {StyleSheet, Text, TouchableOpacity, View, Clipboard} from 'react-native'
import React, {useEffect, useState} from 'react'
import PageScrollView from "@/components/PageScrollView";
import PageTabBar from "@/components/PageTabBar";
import NoData from "@/components/NoData";
import FcButton from "@/components/FcButton";
import FcModal from '@/components/FcModal';
import FcTextInput from '@/components/FcTextInput';
import FormTitle from '@/components/FormTitle';
import DatePicker from '@/components/DatePicker';
import useGetStorage from "@/hooks/useGetStorage";
import {router} from "expo-router";
import {Toast, Flex} from "@ant-design/react-native";
import {useDispatch, useSelector} from "react-redux";
import {set_rowData} from "@/store/reducer/contentManage/contentManageSlice";
import Popover from 'react-native-popover-view';

import {
  useGetListQuery,
  useSmsReminderMutation,
  useQwReminderMutation,
  useCopyMutation,
  useGetTagListMutation,
  useDeletContentMutation
} from "@/store/api/contentManage/contentManageApi";

import {
  useGetDeptTreeListQuery,
} from "@/store/api/login/loginApi";

type Props = {}

const index = (props: Props) => {
  const [list,setList] = useState<any>([])
  const [tagList,setTagList] = useState<any>([])
  const [listParams, setListParams] = useState({
    pageNo: 1,
    pageSize: 20,
    startDate: '',
    endDate: '',
    groupId: '',
    createUsername: '',
  })
  const [index, setIndex] = useState<any>(0)
  const [operateOpen, setOperateOpen] = useState(false)
  const [scriptOpen, setScriptOpen] = useState(false)
  const [titleTextOpen, setTitleTextOpen] = useState(false)
  const [deleteOpen, setDeleteOpen] = useState(false)
  const [groupOpen, setGroupOpen] = useState(false)
  const [staffOpen, setStaffOpen] = useState(false)
  const [dateOpen, setDateOpen] = useState(false)
  const [visible, setVisible] = useState(false)
  const [deptTreeList,setDeptTreeList] = useState<any>([])
  const [searchText, setSearchText] = useState<any>('')
  
  const {data:listDataRef,isSuccess:listSuccess,refetch:listRefetch} = useGetListQuery(listParams)
  const {data:deptListDataRef,isSuccess:deptListSuccess} = useGetDeptTreeListQuery({depType: 2})

  const [smsReminderFun] = useSmsReminderMutation()
  const [qwReminderFun] = useQwReminderMutation()
  const [copyFun] = useCopyMutation()
  const [getTagListFun] = useGetTagListMutation()
  const [deletContentFun] = useDeletContentMutation()

  const dispatch = useDispatch()

  let p = useSelector(state => state.contentManage.rowData)

  useEffect(() => {
    // 在组件加载时调用接口
    getTagList()
  }, []);

  useEffect(() => {
    if(listDataRef?.code === 200){
      const list = listDataRef?.result?.records || []
      const updatedList = list.map((item:any) => ({
        ...item,
        pubTitleIndex: 0,
        titleList: ['', '', '']
      }));
      setList(updatedList)
      console.log(listDataRef,'listDataRef===>');
    }
    if(deptListDataRef?.code === 0){
      let list = deptListDataRef?.result || []
      let arr:any = []

      list.forEach((main:any) => {
        forEachEmpList(main, arr);
      })
      setDeptTreeList(arr)
    }
  },[listSuccess,listDataRef,deptListDataRef, deptListSuccess])

  useEffect(() => {
    listRefetch()
  },[p])

  //获取组件架构
  const forEachEmpList = (obj:any, arr:any) => {
    obj.empList.forEach((user:any) => {
      arr.push({label:user.realname,value:user.realname,key:user.id});
    })
    if(obj.children && obj.children.length > 0) {
      obj.children.forEach((child:any) => {
        forEachEmpList(child, arr);
      })
    }
  }

  // 获取标签列表
  const getTagList = () => {
    getTagListFun({}).then(res => {
      if(res.data.code === 200){
        setTagList(res.data.result.records)
      }
    })
  }

  // 复制文案
  const handleCopyText = async(val:any) => {
    try {
      await Clipboard.setString(val);
      Toast.info('复制成功')
      setOperateOpen(false)
    } catch (error) {
      Toast.info('复制失败')
    }
  }

  // 查看脚本
  const handleScriptOpen = () => {
    if(list[index].videoScript){
      setScriptOpen(true)
    }else{
      handleGenerateScript()
    }
    setOperateOpen(false)
  }

  // 生成脚本
  const handleGenerateScript = async() => {
    Toast.config({ duration: 0})
    let loading:any = null
    setTimeout(() => {
      loading = Toast.loading('脚本生成中')
    }, 100)

    await useGetStorage('token').then(async (token) => {
      try {
        const response = await fetch(`${process.env.EXPO_PUBLIC_API_URL}mm/mmContentManagePub/createVideoScript?id=${list[index].id}`,{
          method: 'POST',
          headers: {
            'content-type': 'application/json',
            'x-access-token': token,
          },
        });

        const blob = await response.blob();
        const reader = new FileReader();

        reader.onload = (event:any) => {
          const result = event.target.result;
          // 按行分割流式数据
          const lines = result.split('\n');
          lines.forEach((line:any) => {
            if (line) {
              let newLine = `${line.replace('data:','')}`;
              // 在这里处理流式数据
              let res = JSON.parse(newLine)
              if (res.status == 'success') {
                let txt = res.text.replace(/(<br\/>)|(<br)/g, '');

                let arr = JSON.parse(JSON.stringify(list))
                arr[index].videoScript = txt
                setList(arr)

                if(res.stop){
                  Toast.remove(loading)
                  Toast.config({ duration: 2})
                  Toast.info('脚本生成成功')
                }
              }
            }
          });
        };

        reader.onerror = (error) => {
          console.error('Error reading blob:', error);
        };

        reader.readAsText(blob);
      }catch (error) {
        Toast.remove(loading)
        Toast.config({ duration: 2})
      }
    })
  }

  //生成发布语
  const handleGenerateTitle = async() => {
    Toast.config({ duration: 0})
    let loading:any = null
    setTimeout(() => {
      loading = Toast.loading('发布语生成中')
    }, 100)

    await useGetStorage('token').then(async (token) => {
      try {
        const response = await fetch(`${process.env.EXPO_PUBLIC_API_URL}mm/mmContentManagePub/createTitle?id=${list[index].id}`,{
          method: 'POST',
          headers: {
            'content-type': 'application/json',
            'x-access-token': token,
          },
        });

        const blob = await response.blob();
        const reader = new FileReader();

        reader.onload = (event:any) => {
          const result = event.target.result;
          // 按行分割流式数据
          const lines = result.split('\n');
          lines.forEach((line:any) => {
            if (line) {
              let newLine = `${line.replace('data:','')}`;
              // 在这里处理流式数据
              let res = JSON.parse(newLine)
              if (res.status == 'success') {
                let txt = res.text.replace(/(<br\/>)|(<br)/g, '');

                let arr = JSON.parse(JSON.stringify(list))
                arr[index].title = txt
                arr[index].titleList = splitTitle(txt)
                setList(arr)

                if(res.stop){
                  Toast.remove(loading)
                  Toast.config({ duration: 2})
                  Toast.info('发布语生成成功')
                }
              }
            }
          });
        };

        reader.onerror = (error) => {
          console.error('Error reading blob:', error);
        };

        reader.readAsText(blob);
      }catch (error) {
        Toast.remove(loading)
        Toast.config({ duration: 2})
      }
    })
  }

  const splitTitle = (text:any) => {
    if(!text) return [];
    text = text.replace(/[\r\n]+/,'');
    try {
      const arr = JSON.parse('['+text+']');
      return arr;
    }
    catch {
      try {
        return JSON.parse('["'+text+'"]');
      }
      catch {
        return []
      }
    }
  }

  // 短信提醒
  const handlSmsReminder = () => {
    smsReminderFun({id: list[index].id}).then(res => {
      if (res.data.code === 200) {
        Toast.info('提醒成功')
        setOperateOpen(false)
      }
    })
  }

  // 企微提醒
  const handleQwReminder = () => {
    qwReminderFun({id: list[index].id}).then(res => {
      if (res.data.code === 200) {
        Toast.info('提醒成功')
        setOperateOpen(false)
      }
    })
  }

  // 克隆
  const handleCopy = () => {
    copyFun({ids: list[index].id}).then(res => {
      if (res.data.code === 200) {
        Toast.info('克隆成功')
        setOperateOpen(false)
        handleSearch()
      }
    })
  }

  //采纳发布语
  const handleAdopt = (val:any) => {
    let arr = JSON.parse(JSON.stringify(list))
    arr[index].pubTitleIndex = val,
    setList(arr)
  }

  // 删除
  const handlDeleteContent = () => {
    deletContentFun({id: list[index].id}).then(res => {
      if (res.data.code === 200) {
        Toast.info('删除成功')
        setOperateOpen(false)
        handleSearch()
      }
    })
  }

  const handleSearch = () => {
    setListParams({
      ...listParams,
      pageNo: 1,
    })
    setList([])
    listRefetch();
  };

  const handleJump = (item:any) => {
    dispatch(set_rowData(item))
    router.push('/videoPublish?type=contentManage')
  }

  return (
    <PageScrollView
      isTransparentTab
      pageTab={
        <PageTabBar
          style={{marginVertical: 10}}
          title={'内容管理'}
          right={
            <View style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
              <TouchableOpacity onPress={() => router.navigate(`/search`)}>
                <Text style={{fontFamily: 'FcIconFont', fontSize: 20, color: '#000000', marginRight: 10}}>&#xe641;</Text>
              </TouchableOpacity>
              
              <Popover
                isVisible={visible}
                onRequestClose={() => setVisible(false)}
                from={(
                  <TouchableOpacity onPress={() => setVisible(true)}>
                    <Text style={{fontFamily: 'FcIconFont', fontSize: 20, color: '#000000'}}>&#xe62f;</Text>
                  </TouchableOpacity>
                )}
                popoverStyle={{padding: 15, backgroundColor: '#454954', width: 150, borderRadius: 8}}
                backgroundStyle={{backgroundColor: 'transparent'}}
              >
                <View>
                  <TouchableOpacity style={{display: 'flex', flexDirection: 'row', alignItems: 'center', height: 40}} onPress={() => {router.push('/contentManage/detail?type=add'); setVisible(false)}}>
                    <Text style={{fontFamily: 'FcIconFont', fontSize: 18, color: '#FFF', marginRight: 8}}>&#xe643;</Text>
                    <Text style={{fontSize: 15, color: '#FFF'}}>新建文案</Text>
                  </TouchableOpacity>

                  <TouchableOpacity style={{display: 'flex', flexDirection: 'row', alignItems: 'center', height: 40}} onPress={() => {router.push('/contentManage/batch?type=account'); setVisible(false)}}>
                    <Text style={{fontFamily: 'FcIconFont', fontSize: 18, color: '#FFF', marginRight: 8}}>&#xe654;</Text>
                    <Text style={{fontSize: 15, color: '#FFF'}}>随机分配账号</Text>
                  </TouchableOpacity>

                  <TouchableOpacity style={{display: 'flex', flexDirection: 'row', alignItems: 'center', height: 40}} onPress={() => {router.push('/contentManage/grouping'); setVisible(false)}}>
                    <Text style={{fontFamily: 'FcIconFont', fontSize: 18, color: '#FFF', marginRight: 8}}>&#xe65c;</Text>
                    <Text style={{fontSize: 15, color: '#FFF'}}>分组管理</Text>
                  </TouchableOpacity>

                  <TouchableOpacity style={{display: 'flex', flexDirection: 'row', alignItems: 'center', height: 40}} onPress={() => {router.push('/contentManage/batch?type=delete'); setVisible(false)}}>
                    <Text style={{fontFamily: 'FcIconFont', fontSize: 18, color: '#FFF', marginRight: 8}}>&#xe61d;</Text>
                    <Text style={{fontSize: 15, color: '#FFF'}}>批量删除</Text>
                  </TouchableOpacity>
                </View>
              </Popover>
            </View>
          }
        />
      }
      pageHeader={
        <Flex justify='between' style={{paddingHorizontal: 16, marginBottom: 8}}>
          <TouchableOpacity style={styles.filter_item} onPress={() => setDateOpen(true)}>
            <Text style={styles.filter_item_text} numberOfLines={1}>编写日期</Text>
            <Text style={{fontFamily: 'FcIconFont', fontSize: 20, color: 'rgba(0, 0, 0, 0.5)'}}>&#xe647;</Text>
          </TouchableOpacity>

          <TouchableOpacity style={styles.filter_item} onPress={() => setGroupOpen(true)}>
            <Text style={styles.filter_item_text} numberOfLines={1}>
              {tagList.find((val:any) => val.id == listParams.groupId)?.name || '分组标签'}
              </Text>
            <Text style={{fontFamily: 'FcIconFont', fontSize: 20, color: 'rgba(0, 0, 0, 0.5)'}}>&#xe647;</Text>
          </TouchableOpacity>

          <TouchableOpacity style={styles.filter_item} onPress={() => setStaffOpen(true)}>
            <Text style={styles.filter_item_text} numberOfLines={1}>
              {deptTreeList.find((val:any) => val.value == listParams.createUsername)?.value || '文案创建人'}
            </Text>
            <Text style={{fontFamily: 'FcIconFont', fontSize: 20, color: 'rgba(0, 0, 0, 0.5)'}}>&#xe647;</Text>
          </TouchableOpacity>
        </Flex>
      }
    >
      <View>
        {
          list.map((item:any, index:any) => (
            <TouchableOpacity activeOpacity={1} style={styles.list_item} key={index} onPress={() => {setIndex(index); router.push('/contentManage/detail'); dispatch(set_rowData(list[index]))}}>
              <View style={styles.list_item_title_box}>
                <Text style={styles.list_item_title} numberOfLines={2}>{ item?.content.split(/【标题】[:：]?/)[1]?.split(/【正文】[:：]?/)[0]?.replace(/[\r\n]+/g, '') || item.content}</Text>
                <Text style={[styles.list_item_status, item.pubStatus == 1 ? {backgroundColor: 'rgba(7, 193, 96, 0.1)', color: '#07C160'} : item.pubStatus == 2 ? {backgroundColor: 'rgba(250, 81, 81, 0.1)', color: '#FA5151'} : null]}>{ !item.pubStatus ? '未发布' : item.pubStatus == 1 ? '已发布' : item.item.pubStatus == 2 ? '发布失败' : '' }</Text>
              </View>
              <View style={styles.list_item_Content}>
                <Text style={styles.list_item_Text} numberOfLines={1}>编写日期：{ item.createTime }</Text>
                <Text style={styles.list_item_Text} numberOfLines={1}>文案创建人：{ item.createUsername }</Text>
                { item.templateName ? <Text style={styles.list_item_Text} numberOfLines={1}>文案类型：{ item.templateName}</Text> : null }
                { item.pubType == 1 ? <Text style={styles.list_item_Text}>发布渠道：快手</Text> : item.pubType == 2 ? <Text style={styles.list_item_Text}>发布渠道：抖音</Text> : null}
              </View>
              <View style={styles.list_btn_warp}>
                <FcButton
                  onPress={() => {setOperateOpen(true); setIndex(index)}}
                  type='default'
                  style={[styles.list_item_btn]}
                  itemStyle={{width: '100%', height: '100%', borderRadius: 8}}
                  textName='更多操作'
                  borderWidth={1}
                ></FcButton>

                <FcButton
                  onPress={() => {setIndex(index); router.push('/contentManage/detail'); dispatch(set_rowData(list[index]))}}
                  type='default'
                  style={[styles.list_item_btn]}
                  itemStyle={{width: '100%', height: '100%', borderRadius: 8}}
                  textName='查看详情'
                  borderWidth={1}
                ></FcButton>

                <FcButton
                  onPress={() => !item.videoUrl ? {} : !item.pubStatus ? handleJump(item) : {}}
                  type='txtJBAndBkJB'
                  style={[styles.list_item_btn]}
                  itemStyle={{width: '100%', height: '100%', borderRadius: 8}}
                  textName={!item.videoUrl ? 'AI成片' : !item.pubStatus ? '发布视频' : '预览'}
                  borderWidth={1}
                ></FcButton>
              </View>
            </TouchableOpacity>
          ))
        }
        {!list && <NoData hintText='目前没有数据，AI正在获取，请等待！再次点击关键词刷新获取列表。'/>}
      </View>
      
      {/* 更多操作弹窗 */}
      <FcModal
        isOpen={operateOpen}
        onFcModalClose={() => setOperateOpen(false)}
        titleText='更多操作'
        titleBottomBorderWidth={0}
      >
        <View>
          <View style={{height: 4, backgroundColor: '#F1F2F4'}}></View>
          <TouchableOpacity style={styles.modal_item_text} onPress={() => handleCopyText(list[index].content)}>
            <Text style={{fontSize: 17}}>复制文案</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.modal_item_text} onPress={() => handleScriptOpen()}>
            <Text style={{fontSize: 17}}>{ list[index]?.videoScript ? '查看脚本' : '生成脚本'}</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.modal_item_text} onPress={() => {setTitleTextOpen(true); handleGenerateTitle()}}>
            <Text style={{fontSize: 17}}>生成发布语#话题</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.modal_item_text} onPress={() => {router.push('/contentManage/translate'); dispatch(set_rowData(list[index])); setOperateOpen(false)}}>
            <Text style={{fontSize: 17}}>翻译</Text>
          </TouchableOpacity>
          <View style={{height: 12, backgroundColor: '#F1F2F4'}}></View>
          <TouchableOpacity style={styles.modal_item_text} onPress={() => handlSmsReminder()}>
            <Text style={{fontSize: 17}}>短信提醒 { list[index]?.messageNum ? `(${list[index]?.messageNum})` : '' }</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.modal_item_text} onPress={() => handleQwReminder()}>
            <Text style={{fontSize: 17}}>企微提醒 { list[index]?.wxNum ? `(${list[index]?.wxNum})` : '' }</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.modal_item_text} onPress={() => handleCopy()}>
            <Text style={{fontSize: 17}}>克隆</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.modal_item_text} onPress={() => setDeleteOpen(true)}>
            <Text style={{fontSize: 17, color: '#FA5151'}}>删除</Text>
          </TouchableOpacity>
        </View>
      </FcModal>
      
      {/* 脚本弹窗 */}
      <FcModal
        isOpen={scriptOpen} 
        onFcModalClose={() => setScriptOpen(false)}
        titleText='生成脚本'
        titleBottomBorderWidth={1}
        bottom={
          <View style={styles.script_bottom}>
            <FcButton
              onClick={() => handleGenerateScript()}
              type='default'
              style={{width: '48%', height: 40, justifyContent: 'center', backgroundColor: '#F1F2F4', borderRadius: 8, fontSize: 15}}
              textName='再次生成'
            />

            <FcButton
              onClick={() => handleCopyText(list[index].videoScript)}
              type='BjJB'
              colors={['#6989FF', '#C65EFD']}
              style={{width: '48%', height: 40, justifyContent: 'center'}}
              itemStyle={{borderRadius: 8, fontSize: 15}}
              textName='复制脚本'
            />
          </View>
        }
      >
        <View>
          <Text style={{height: '50vh', paddingHorizontal: 16, marginTop: 12, lineHeight: 24}}>{ list[index]?.videoScript }</Text>
        </View>
      </FcModal>

      {/* 发布语弹窗 */}
      <FcModal
        isOpen={titleTextOpen} 
        onFcModalClose={() => setTitleTextOpen(false)}
        titleText='AI发布语'
        titleBottomBorderWidth={1}
        titleRight={
          <Flex style={{height: '100%'}}>
            <FcButton
              onClick={() => handleGenerateTitle()}
              type='BjJB'
              colors={['#6989FF', '#C65EFD']}
              style={{width: 72, height: 28}}
              itemStyle={{borderRadius: 8}}
              textName='再次生成'
              borderWidth={1}
            />
          </Flex>
        }
      >
        <View style={{padding: 16}}>
          <View style={{marginBottom: 16}}>
            <View style={styles.title_text_item}>
              <FormTitle isLeftIcon title='发布语1' style={{paddingVertical: 0, flex: 1}} />
              <FcButton
                onPress={() => handleAdopt(0)}
                type={list[index]?.pubTitleIndex == 0 ? 'txtJBAndBkJB' : 'default'}
                style={{width: 60, height: 28}}
                itemStyle={{width: '100%', height: '100%', borderRadius: 8}}
                textName={list[index]?.pubTitleIndex == 0 ? '已采纳' : '采纳'}
                borderWidth={1}
              ></FcButton>
            </View>

            <FcTextInput
              style={{marginTop: 8}}
              text={list[index]?.titleList[0]}
              multiline
              height={120}
              placeholder={'输入发布语1'}
            />
          </View>

          <View style={{marginBottom: 16}}>
            <View style={styles.title_text_item}>
              <FormTitle isLeftIcon title='发布语2' style={{paddingVertical: 0, flex: 1}} />
              <FcButton
                onPress={() => handleAdopt(1)}
                type={list[index]?.pubTitleIndex == 1 ? 'txtJBAndBkJB' : 'default'}
                style={{width: 60, height: 28}}
                itemStyle={{width: '100%', height: '100%', borderRadius: 8}}
                textName={list[index]?.pubTitleIndex == 1 ? '已采纳' : '采纳'}
                borderWidth={1}
              ></FcButton>
            </View>

            <FcTextInput
              style={{marginTop: 8}}
              text={list[index]?.titleList[1]}
              multiline
              height={120}
              placeholder={'输入发布语2'}
            />
          </View>

          <View>
            <View style={styles.title_text_item}>
              <FormTitle isLeftIcon title='发布语3' style={{paddingVertical: 0, flex: 1}} />
              <FcButton
                onPress={() => handleAdopt(2)}
                type={list[index]?.pubTitleIndex == 2 ? 'txtJBAndBkJB' : 'default'}
                style={{width: 60, height: 28}}
                itemStyle={{width: '100%', height: '100%', borderRadius: 8}}
                textName={list[index]?.pubTitleIndex == 2 ? '已采纳' : '采纳'}
                borderWidth={1}
              ></FcButton>
            </View>

            <FcTextInput
              style={{marginTop: 8}}
              text={list[index]?.titleList[2]}
              multiline
              height={120}
              placeholder={'输入发布语3'}
            />
          </View>
        </View>
      </FcModal>

      {/* 删除弹窗 */}
      <FcModal
        isOpen={deleteOpen}
        transparent
        closeShow={false}
        animationType='fade'
        onFcModalClose={() => setDeleteOpen(false)}
        style={{width: 280, borderBottomRightRadius: 12, borderBottomLeftRadius: 12}}
        titleText={'确认要删除吗？'}
        titleBottomBorderWidth={0}
        footer={[
          {
            text: '取消',
            onPress: () => setDeleteOpen(false),
            style: { color: 'rgba(0, 0, 0, 0.5)',fontSize: 17 },
          },
          {
            text: '确认',
            onPress: () => handlDeleteContent(),
            style: { color: '#2856FF',fontSize: 17 },
          },
        ]}
      >
        <Text style={{textAlign:'center',color: 'rgba(0,0,0,0.5)'}}>一旦删除，当前分组将被删除哦~</Text>
      </FcModal>
      
      {/* 分组弹窗 */}
      <FcModal
        isOpen={groupOpen}
        onFcModalClose={() => setGroupOpen(false)}
        titleText='分组标签'
        titleBottomBorderWidth={1}
      >
        <View style={{flex: 1}}>
          {tagList.map((item:any, index:any) => (
            <TouchableOpacity key={index} style={[styles.modal_item_text]} onPress={() => {setListParams({...listParams, pageNo: 1, groupId: item.id}); listRefetch()}}>
              <Text style={{fontSize: 15, color: listParams.groupId == item.id ? '#2856FF' : ''}}>{item.name}</Text>
            </TouchableOpacity>
          ))}
          {tagList.length == 0 && <Flex justify='center' style={{flex: 1}}><NoData hintText='暂无数据'/></Flex>}
        </View>
      </FcModal>

      {/* 编写人员弹窗 */}
      <FcModal
        isOpen={staffOpen}
        onFcModalClose={() => setStaffOpen(false)}
        titleText='编写人员'
        titleBottomBorderWidth={1}
      >
        <View style={{flex: 1}}>
          {deptTreeList.map((item:any, index:any) => (
            <TouchableOpacity key={index} style={[styles.modal_item_text]} onPress={() => {setListParams({...listParams, pageNo: 1, createUsername: item.value}); listRefetch()}}>
              <Text style={{fontSize: 15, color: listParams.createUsername == item.value ? '#2856FF' : ''}}>{item.value}</Text>
            </TouchableOpacity>
          ))}
          {deptTreeList.length == 0 && <Flex justify='center' style={{flex: 1}}><NoData hintText='暂无数据'/></Flex>}
        </View>
      </FcModal>

      {/* 编写日期弹窗 */}
      <DatePicker
        isOpen={dateOpen} 
        titleText={'编写日期'} 
        dateRange={[listParams.startDate, listParams.endDate]}
        dateType='range'
        onClose={() => setDateOpen(false)}
        onConfirm={(startDate:any, endDate:any) => {setListParams({...listParams, pageNo: 1, startDate: startDate, endDate: endDate}); listRefetch()}}
      ></DatePicker>
    </PageScrollView>
  )
}

export default index

const styles = StyleSheet.create({
  filter_item: {
    width: '30%',
    height: 32,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderRadius: 4,
    backgroundColor: '#FFF',
    paddingHorizontal: 8,
    color: 'rgba(0, 0, 0, 0.5)',
    borderWidth: 0.5,
    borderColor: 'rgba(0, 0, 0, 0.1)',
  },
  filter_item_text: {
    fontSize: 12,
    color: 'rgba(0, 0, 0, 0.5)',
    flex: 1
  },
  tabBar_btn: {
    width: 64,
    height: 28,
    display: 'flex',
    justifyContent: "center",
    alignItems: "center",
    fontSize: 12,
    color: '#2856FF',
    borderRadius: 8,
    backgroundColor: 'white'
  },
  list_item: {
    padding: 12,
    borderRadius: 8,
    marginBottom: 8,
    backgroundColor: '#FFF',
  },
  list_item_title_box: {
    display: 'flex',
    flexDirection: "row",
    justifyContent: 'space-between',
  },
  list_item_title: {
    flex: 1,
    fontSize: 15, 
    lineHeight: 26,
    marginRight: 12,
    fontWeight: '500',
  },
  list_item_status: {
    height: 22,
    fontSize: 12,
    marginTop: 3,
    lineHeight: 22,
    borderRadius: 4,
    paddingHorizontal: 6,
    color: 'rgba(0, 0, 0, 0.5)',
    backgroundColor: 'rgba(0, 0, 0, 0.06)',
  },
  list_item_Content: {
    display: 'flex',
    flexDirection: "row",
    flexWrap: 'wrap',
    marginVertical: 10,
    justifyContent: 'space-between',
  },
  list_item_Text: {
    width: '46.5%',
    lineHeight: 27,
    color: 'rgba(0, 0, 0, 0.5)',
    fontSize: 13
  },
  list_btn_warp: {
    display: 'flex',
    flexDirection: "row",
    justifyContent: 'space-between',
  },
  list_item_btn: {
    width: '31.5%',
    height: 40,
    lineHeight: 40,
    borderRadius: 8,
    marginHorizontal: 0,
    marginBottom: 0
  },
  modal_item_text: {
    marginHorizontal: 16,
    height: 56,
    alignItems: 'center',
    justifyContent: 'center',
    borderBottomColor: 'rgba(0,0,0,0.05)',
    borderBottomWidth: 1,
    fontSize: 17,
    color: 'rgba(0,0,0,0.9)'
  },
  script_bottom: {
    height: 56,
    display: 'flex',
    flexDirection: "row",
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
  },
  title_text_item: {
    flexDirection: "row",
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  title_input: {
    backgroundColor: '#F1F2F4',
    color: 'rgba(0,0,0,0.9)',
    fontSize: 17,
    lineHeight: 26,
    borderRadius: 8,
    marginTop: 10,
    paddingVertical: 8,
    paddingHorizontal: 12,
  },
  search_wrap_modal: {
    flexDirection: 'row',
    alignItems: "center",
    backgroundColor: '#F1F2F4',
    borderRadius: 9,
    marginHorizontal: 16,
    height: 40,
    paddingHorizontal: 14
  },
  search: {
    flex: 1,
    height: '100%',
    color: 'rgba(0,0,0,0.9)',
    lineHeight: 20,
  },
  staff_item: {
    height: 48,
    borderRadius: 8,
    marginTop: 10,
    paddingHorizontal: 12,
    backgroundColor: '#FFF',
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  search_wrap: {
    flexDirection: 'row',
    alignItems: "center",
    backgroundColor: '#F1F2F4',
    borderRadius: 9,
    marginHorizontal: 16,
    height: 40,
    paddingHorizontal: 14
  },
})

